<template>
  <div class='box posi-rel'>
      <!-- 右下角二维码 -->
      <img class='qr-corner posi-ab cursor-pointer' 
          @click="toogleLoginList(true)" 
          src="../../assets/qr_login_icon.png">
      <div class="fl ml30">
          <ul class='left-list'>
              <li><img src="../../assets/platform.png" alt=""></li>
              <li><el-button class='login-btn' type="primary" @click='tooglePhoneLogin(true)'>手机号登录</el-button></li>
              <li><el-button class='register-btn' @click='toogleRegister(true)'>注 册</el-button></li>
              <li>
                  <el-checkbox v-model="checked">同意</el-checkbox>
                  <a @click.prevent="open('https://st.music.163.com/official-terms/service')" class='privacy-item'>《服务条款》</a> 
                  <a @click.prevent="open('https://st.music.163.com/official-terms/privacy')" class='privacy-item'>《隐私政策》</a> 
                  <a @click.prevent="open('https://st.music.163.com/official-terms/children')" class='privacy-item'>《儿童隐私政策》</a>
              </li>
          </ul>
      </div>
      <div class="fl">
          <ul class='right-list mt20'>
              <li>
                  <a href="">
                      <i class='disinblock icon wechat'></i>
                      <span class='ml20'>微信登录</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <i class='disinblock icon qq'></i>
                      <span class='ml20'>QQ登录</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <i class='disinblock icon weibo'></i>
                      <span class='ml20'>微博登录</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <i class='disinblock icon wangyi'></i>
                      <span class='ml20'>网易邮箱账号登录</span>
                  </a>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
  name: 'otherLoginMethods',
  props: ['showQrCode', 'showLoginList', 'showPhoneLogin', 'showRegister'],
  data() {
    return {
      checked: false
    }
  },
  methods: {
    toogleLoginList(flag) {
      if (!this.checked) {
        this.$message({
          message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》',
          type: 'warning'
        });
      } else {
        this.$emit('showQrCode', flag)
      }
    },
    open(url) {
      window.open(url)
    },
    tooglePhoneLogin(flag) {
      if (!this.checked) {
        this.$message({
          message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》',
          type: 'warning'
        });
      } else {
        this.$emit('showPhoneLogin', flag)
      }
    },
    toogleRegister(flag) {
      if (!this.checked) {
        this.$message({
          message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》',
          type: 'warning'
        });
      } else {
        this.$emit('showRegister', flag)
      }
    }
  }
}
</script>

<style lang='less' scoped>
.box {
    width: 100%;
    height: 300px;
    .qr-corner {
      bottom: -30px;
      right: -25px;
      width: 52px;
      height: 52px;
    }
    .left-list {
        padding: 0 20px;
        border-right: 1px solid #e1e1e1;
      li {
        margin-top: 20px;
        .privacy-item {
          color: #0c73c2;
          font-size: 10px;
        }
      }
      /deep/.el-button {
        width: 203px;
        line-height: 2px;
        height: 20px;
        font-size: 12px;
        background-color: #2377d0;
        border-color: #2377d0;
        &.register-btn {
          background-color: #f1f1f1;
          border-color: #c0c4cc;
        }
      }
      /deep/.el-checkbox__label {
        font-size: 10px;
      }
    }
    .right-list {
        padding-left: 30px;
        li {
          width: 160px;
          height: 50px;
          line-height: 50px;
          a {
              display: flex;
              align-items: center;
          }
        }
        .icon {
            width: 40px;
            height: 40px;
        }
        .wechat {
          background: url('../../assets/logos.png') -1079px -668px;
        }
        .qq {
          background: url('../../assets/logos.png') -1118px -668px;
        }
        .weibo {
          background: url('../../assets/logos.png') -1159px -668px;
        }
        .wangyi {
          background: url('../../assets/logos.png') -1199px -668px;
        }
    }
}

</style>